<template>
  <div class="my-module-container">
    <div class="module-list">
      <!-- 按照图片布局样式展示我的模块 -->
      <div
        class="module-item"
        v-for="(item, index) in myModules"
        :key="index"
        draggable="true"
        @dragstart="drag($event, item.name)"
        @dragend="dragends"
      >
        <div class="module-name">
          {{ item.text }}
        </div>
        <div>
          <el-popconfirm
            title="您确定要禁用该组件吗?"
            icon="el-icon-warning"
            iconColor="red"
            @click.stop="handleGrey(item)"
          >
            <i
              class="el-icon-view"
              slot="reference"
              style="cursor: pointer"
            />
          </el-popconfirm>
          <el-popconfirm
            title="您确定要删除该组件吗?"
            icon="el-icon-warning"
            iconColor="red"
            @confirm="onConfirms(ind)"
          >
            <i
              class="el-icon-delete"
              slot="reference"
              style="cursor: pointer;margin-left: 10px;"
            />
          </el-popconfirm>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    pointer: Object,
  },
  data() {
    return {
      // 模拟数据，实际项目中可以从API获取
      myModules: [
        {
          text: "轮播图",
          name: "carousel",
        },
        {
          text: "金刚区",
          name: "quickNav",
        },
        {
          text: "快捷服务",
          name: "quickService",
        },
        {
          text: "活动报名",
          name: "activitySignup",
        },
        {
          text: "通知公告",
          name: "announcement",
        },
        {
          text: "新闻咨询",
          name: "newsConsultation",
        },
      ],
    };
  },
  methods: {
    /**
     * 当用户开始拖动元素或选择文本时触发此事件
     *
     * @param {Object} event event对象
     * @param {String} moduleName 模块名称
     */
    drag(event, moduleName) {
      /* 开启穿透 */
      this.pointer.show = true;
      /* 传递参数 */
      event.dataTransfer.setData("componentName", moduleName);
    },

    /**
     * 当拖动操作结束时（释放鼠标按钮或按下退出键），会触发此事件
     */
    dragends() {
      /* 关闭穿透 */
      this.pointer.show = false;
    },

    /**
     * 预览模块
     * @param {Object} module 模块对象
     */
    previewModule(module) {
      console.log("预览模块:", module);
      // 实际项目中可以实现预览功能
    },

    /**
     * 删除模块
     * @param {Number} index 模块索引
     */
    deleteModule(index) {
      // 实际项目中可以添加确认对话框
      this.myModules.splice(index, 1);
      console.log("删除模块:", index);
    },
  },
};
</script>
<style scoped lang="scss">
.my-module-container {
  padding: 16px 0;
}

.no-data {
  text-align: center;
  padding: 40px 20px;
  color: #909399;
}

.no-data-text {
  font-size: 14px;
  margin-bottom: 8px;
}

.no-data-desc {
  font-size: 12px;
  color: #c0c4cc;
}

/* 模块列表容器 */
.module-list {
  background: #fff;
  border-radius: 4px;
  overflow: hidden;
}

/* 模块项样式 - 完全按照图片布局 */
.module-item {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  font-size: 14px;
  cursor: all-scroll;
  color: #323233;
  border-radius: 2px;
  background-color: #fff;
  margin-bottom: 10px;
  border: 1px solid #e4e7ed;
  border-radius: 5px;
  i {
    color: #999;
  }
}

/* 模块名称样式 */
.module-name {
  font-size: 13px;
  color: #333;
  transition: color 0.3s ease;

  /* 鼠标悬停时的文字颜色变化 */
  .module-item:hover & {
    color: #348cf8;
    font-weight: 500;
  }
}

/* 操作按钮区域样式 */
.module-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* 图标样式 */
.module-actions i {
  font-size: 16px;
  color: #999;
  cursor: pointer;
  transition: all 0.3s ease;

  /* 鼠标悬停效果 */
  &:hover {
    color: #348cf8;
    transform: scale(1.1);
  }
}

/* 眼睛图标特定样式 */
.icon-eye {
  &:hover {
    transform: scale(1.1) rotate(5deg);
  }
}

/* 删除图标特定样式 */
.icon-delete {
  &:hover {
    color: #f56c6c;
    transform: scale(1.1);
  }
}

/* 添加拖拽时的视觉反馈 */
.module-item[draggable="true"] {
  &:active {
    opacity: 0.7;
    transform: translateX(5px);
    transition: all 0.2s ease;
  }
}
</style>
